<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000'
import Index_gujia from '../components/yzx/Cate_gujia.vue'
import { useRouter } from 'vue-router';

const router = useRouter()

const activeName = ref('全部故事')
const loading = ref(false)

// 获取数据列表
const housedata = ref([])
onMounted(() => {
    gethouse()
})

const gethouse = async () => {
    let { data: { homelist } } = await axios.get('/yzx/gethome')

    homelist.forEach(item => {
        if (!item.u_id) {
            item.u_id = { admin: '张三', landlord: '' };
        }
    });
    housedata.value = homelist
    loading.value = true
}

</script>
<template>
    <div id="faxian">
        <van-sticky>
            <div id="nav">
                <p id="navp">探索发现</p>
                <div id="sele">
                    <select name="" id="select">
                        <option value="全部">全部</option>
                        <option value="珠海">珠海</option>
                        <option value="云南">云南</option>
                        <option value="海南">海南</option>
                        <option value="成都">成都</option>
                        <option value="广州">广州</option>
                    </select>
                </div>
            </div>
        </van-sticky>
        <div id="navmain">
            <!-- 故事 -->
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="全部故事" name="全部故事" id="tabpane">
                    <div id="fxbox" v-if="loading" v-for="item in housedata" :key="item._id"
                        @click="router.push(`/home/xq?id=${item._id}`)">
                        <img v-lazy="item.img[0]" alt="">
                        <div id="btn">{{ item.c_cate }}</div>
                        <p>
                            <span style="font-weight: bolder;display: inline-block;margin-top: 10px;font-size: 16px;">{{
                                item.cate }}</span>
                            <el-text line-clamp="2">
                                {{ item.desc }}
                            </el-text>
                        </p>

                        <div id="admin">
                            <img v-lazy="item.u_id?.landlord || 'https://ts2.cn.mm.bing.net/th?id=OIP-C.gRfn6XdqNa3L6aVbzwWuLQHaHa&w=120&h=104&c=7&bgcl=e5c8e6&r=0&o=6&dpr=1.4&pid=13.1'"
                                alt="">
                            <span style="font-size: 10px;font-weight: bold;margin-left: 15px;display: inline-block;">{{
                                item.u_id.admin }}</span>
                            <span style="margin-left: 15px;">
                                <van-icon name="good-job-o" />
                                {{ item.roomNum }}{{ item.toiletNum }}
                            </span>
                            <span style="margin-left: 15px;">
                                <van-icon name="chat-o" />
                                {{ item.badNum }}
                            </span>
                        </div>
                    </div>
                    <Index_gujia v-else />
                </el-tab-pane>
                <el-tab-pane label="民宿" name="民宿" id="tabpane">
                    <div id="fxbox" v-for="item in housedata.filter(item => item.c_cate === '民宿')" :key="item._id"
                        @click="router.push(`/home/xq?id=${item._id}`)">
                        <img v-lazy="item.img[0]" alt="">
                        <div id="btn">{{ item.c_cate }}</div>
                        <p>
                            <span style="font-weight: bolder;display: inline-block;margin-top: 10px;font-size: 16px;">{{
                                item.cate }}</span>
                            <el-text line-clamp="2">
                                {{ item.desc }}
                            </el-text>
                        </p>
                        <div id="admin">
                            <img v-lazy="item.u_id?.landlord || 'https://ts2.cn.mm.bing.net/th?id=OIP-C.gRfn6XdqNa3L6aVbzwWuLQHaHa&w=120&h=104&c=7&bgcl=e5c8e6&r=0&o=6&dpr=1.4&pid=13.1'"
                                alt="">
                            <span style="font-size: 10px;font-weight: bold;margin-left: 15px;display: inline-block;">{{
                                item.u_id.admin }}</span>
                            <span style="margin-left: 15px;">
                                <van-icon name="good-job-o" />
                                {{ item.roomNum }}{{ item.toiletNum }}
                            </span>
                            <span style="margin-left: 15px;">
                                <van-icon name="chat-o" />
                                {{ item.badNum }}
                            </span>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="景点" name="景点" id="tabpane">
                    <div id="fxbox" v-for="item in housedata.filter(item => item.c_cate === '景点')" :key="item._id"
                        @click="router.push(`/home/xq?id=${item._id}`)">
                        <img v-lazy="item.img[0]" alt="">
                        <div id="btn">{{ item.c_cate }}</div>
                        <p>
                            <span style="font-weight: bolder;display: inline-block;margin-top: 10px;font-size: 16px;">{{
                                item.cate }}</span>
                            <el-text line-clamp="2">
                                {{ item.desc }}
                            </el-text>
                        </p>
                        <div id="admin">
                            <img v-lazy="item.u_id?.landlord || 'https://ts2.cn.mm.bing.net/th?id=OIP-C.gRfn6XdqNa3L6aVbzwWuLQHaHa&w=120&h=104&c=7&bgcl=e5c8e6&r=0&o=6&dpr=1.4&pid=13.1'"
                                alt="">
                            <span style="font-size: 10px;font-weight: bold;margin-left: 15px;display: inline-block;">{{
                                item.u_id.admin }}</span>
                            <span style="margin-left: 15px;">
                                <van-icon name="good-job-o" />
                                {{ item.roomNum }}{{ item.toiletNum }}
                            </span>
                            <span style="margin-left: 15px;">
                                <van-icon name="chat-o" />
                                {{ item.badNum }}
                            </span>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="美食" name="美食" id="tabpane">
                    <div id="fxbox" v-for="item in housedata.filter(item => item.c_cate === '美食')" :key="item._id"
                        @click="router.push(`/home/xq?id=${item._id}`)">
                        <img v-lazy="item.img[0]" alt="">
                        <div id="btn">{{ item.c_cate }}</div>
                        <p>
                            <span style="font-weight: bolder;display: inline-block;margin-top: 10px;font-size: 16px;">{{
                                item.cate }}</span>
                            <el-text line-clamp="2">
                                {{ item.desc }}
                            </el-text>
                        </p>
                        <div id="admin">
                            <img v-lazy="item.u_id?.landlord || 'https://ts2.cn.mm.bing.net/th?id=OIP-C.gRfn6XdqNa3L6aVbzwWuLQHaHa&w=120&h=104&c=7&bgcl=e5c8e6&r=0&o=6&dpr=1.4&pid=13.1'"
                                alt="">
                            <span style="font-size: 10px;font-weight: bold;margin-left: 15px;display: inline-block;">{{
                                item.u_id.admin }}</span>
                            <span style="margin-left: 15px;">
                                <van-icon name="good-job-o" />
                                {{ item.roomNum }}{{ item.toiletNum }}
                            </span>
                            <span style="margin-left: 15px;">
                                <van-icon name="chat-o" />
                                {{ item.badNum }}
                            </span>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="出去嗨" name="出去嗨" id="tabpane">
                    <div id="fxbox" v-if="loading" v-for="item in housedata.filter(item => item.c_cate === '出去嗨')"
                        :key="item._id" @click="router.push(`/home/xq?id=${item._id}`)">
                        <img v-lazy="item.img[0]" alt="">
                        <div id="btn">{{ item.c_cate }}</div>
                        <p>
                            <span style="font-weight: bolder;display: inline-block;margin-top: 10px;font-size: 16px;">{{
                                item.cate }}</span>
                            <el-text line-clamp="2">
                                {{ item.desc }}
                            </el-text>
                        </p>
                        <div id="admin">
                            <img v-lazy="item.u_id?.landlord || 'https://ts2.cn.mm.bing.net/th?id=OIP-C.gRfn6XdqNa3L6aVbzwWuLQHaHa&w=120&h=104&c=7&bgcl=e5c8e6&r=0&o=6&dpr=1.4&pid=13.1'"
                                alt="">
                            <span style="font-size: 10px;font-weight: bold;margin-left: 15px;display: inline-block;">{{
                                item.u_id.admin }}</span>
                            <span style="margin-left: 15px;">
                                <van-icon name="good-job-o" />
                                {{ item.roomNum }}{{ item.toiletNum }}
                            </span>
                            <span style="margin-left: 15px;">
                                <van-icon name="chat-o" />
                                {{ item.badNum }}
                            </span>
                        </div>
                    </div>
                    <Index_gujia v-else />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<style scoped>
#faxian {
    width: 100vw;
    height: 100vh;
}

#faxian #nav {
    width: 100%;
    height: 60px;
    background-color: #4a73ff;
    line-height: 60px;
    text-align: center;
    color: white;
    font-size: 19px;
}

#faxian #nav #navp {
    display: inline-block;
    font-weight: bolder;
}

#sele {
    margin-top: -75px;
    margin-left: 300px;
}

#select {
    width: 60px;
    height: 25px;
    border: none;
    background-color: #dfe6fe;
    font-size: 16px;
}

#navmain {
    width: 100%;
    height: 500px;
    /* background-color: palegreen; */
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

#fxbox {
    width: 175px;
    height: 230px;
    /* background-color: pink; */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    border: 1px solid #cecece;
    box-shadow: 5px 5px 5px #8f8d8d4d;

}

#fxbox img {
    width: 100%;
    height: 120px;
}

#tabpane {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#btn {
    width: 50px;
    height: 25px;
    font-size: 12px;
    border: none;
    margin-left: 120px;
    background-color: #ffffff;
    text-align: center;
    line-height: 25px;
    margin-top: -40px;
    position: relative;
    z-index: 5;
}

#admin img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 12px;
}
</style>